<template>
  <div>

    <el-row :gutter="20">
      <el-col :span="16">

        <div id="mapDiv">
          <baidu-map class="map"
                     :center="centerPath"
                     :zoom="15"
                     @zoomend="changeEnd"
                     @zoomstart="changeStart"
                     @ready="getTrack"
                     :scroll-wheel-zoom="true"
          >

            <!--    <bm-driving start="天安门" end="百度大厦" @searchcomplete="handleSearchComplete" :panel="false" :autoViewport="true"></bm-driving>-->





            <bml-lushu
              :content="item.carnumber"
              :path="item.trackPointS"
              :icon="icon"
              :play="play"
              :rotation="rotationa"
              :key="item.id"
              v-for="item in trackSPath"
            >

            </bml-lushu>







          </baidu-map>

          <my-overlay
            @selectChange="selectChange"
            id="myOverlay"
            text="点击我"
            :active="active"
            :stateNumber="stateNumber"
            @mouseover.native="active = true"
            @mouseleave.native="active = false">
          </my-overlay>
        </div>



      </el-col>
      <el-col :span="8">

<!--        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->

        <div style="overflow: scroll;height: 800px;width: 180px">

          <el-radio-group @change="stateChange" v-model="radio1">

            <div v-if="trackSPath.length==0">
              <el-radio-button >数据加载中</el-radio-button>
            </div>

            <div  v-for="item in trackSPath" style="float:left">
              <el-radio-button  :label="item.carnumber +'-'+ item.carstatus"></el-radio-button>
            </div>



          </el-radio-group>

        </div>


      </el-col>



    </el-row>

  </div>




</template>

<script>
import {
  BmlLushu,
  BaiduMap,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch,
  BmMarker,
  BmGeolocation,

} from "vue-baidu-map";
import MyOverlay from '../components/MyOverlay.vue'




export default {
  components: {
    BmlLushu,
    MyOverlay
  },
  data () {
    return {
      stateNumber:{
        all:0,
        on:0,
        off:0,
        park:0,
        flameout:0
      },
      radio1: 0,
      active: false,
      centerPath:{lng: 104.071, lat: 30.672},
      data: [{
        label: '离线',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      play: true,
      rotationa: true,
      trackSPath: [],
      trackSPathCopy:[],
      trackPointS:[],
      icon: {
        url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
        size: {width: 52, height: 26},
        opts: {anchor: {width: 27, height:13}}
      },
      infoWindow: {
        show: true,
        contents: '车牌号.'
      }
    }
  },
  methods: {
    stateChange(e){
      console.log(e);

      this.trackSPath.forEach(item=>{

        if(e.indexOf(item.carnumber)!=-1){
          this.centerPath={
            lng: item.lon,
            lat: item.lat
          }
        }



      })

      console.log( this.centerPath);

    },
    selectChange(e){


      let newTrack=[];
      this.trackSPathCopy.forEach(item=>{

        if(item.carstatus==e||e=="全部"){
          newTrack.push(item)
        }

      })

      this.trackSPath=newTrack;
    },
    handleNodeClick(data){
      console.log(data);
    },
    changeStart({type, target}){

      this.play=false;
      this.rotationa=false;

    },
    changeEnd(){
      this.play=true;
      this.rotationa=true;

    },
    reset () {
      this.play = false
    },
    getTrack(BMap, map){

      let id=1;

      let on=0;
      let off=0;
      let park=0;
      let flameout=0;


        this.$http({
          method: 'post',
          url: 'http://localhost:18084/trackForNumber/getTreack',
        }).then((e)=>{

          if(e.data.status){

            let Cl=[];

            e.data.data.forEach(item=>{
            console.log(item.data.carstatus)
              if(item.data.carstatus=='行驶'){
                on=on+1;
              }else if(item.data.carstatus=='离线'){
                off=off+1;
              }else if(item.data.carstatus=='停车'){
                park=park+1;
              }else if(item.data.carstatus=='熄火'){
                flameout=flameout+1;
              }

              Cl.push({
                ...item.data,
                trackPointS:[
                  {
                    lat:item.data.lat,
                    lng:item.data.lon,
                    of:"inner"
                  }
                ],
                id:id+1,
              })
              id=id+1

            })

            this.trackSPath=Cl;
            this.trackSPathCopy=this.trackSPath;

            this.stateNumber={
              all:e.data.data.length,
              on:on,
              off:off,
              park:park,
              flameout:flameout
            }
            console.log(this.trackSPath);
          }

        })






    },
    handleSearchComplete (res) {
      //  this.path = res.getPlan(0).getRoute(0).getPath()
      //
      // console.log(this.path);

    },
    infoWindowClose (e) {
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    },
    clear () {
      this.infoWindow.contents = ''
    },
     randomNum(minNum,maxNum){
     switch(arguments.length){
    case 1:
      return parseInt(Math.random()*minNum+1,10);
      break;
    case 2:
      return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
      break;
    default:
      return 0;
      break;
  }
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.map {
  width: 100%;
  height: 800px;

}
#mapDiv {
  position: relative;
}
#myOverlay {
  right: 0px;
  top: 0px;
  position: absolute;
  z-index: 100;
}
</style>
